<template>
  <div :style="{ height: height + 'px' }" ref="chatMain" class="chat-main scrollbar" @scroll="lookHistory=false">
    <div class="history" @click="history" v-if="showHistory">
      <span>历史记录...</span>
    </div>
    <template v-for="(item, i) in list">
      <msg-item-me
        v-if="item.source == 'me'"
        :showDate="getShowAgoDate(i)"
        :key="i"
        :value="item.value"
        :icon="item.icon"
        :name="item.name"
        :date="item.date"
        :id="item.id"
        :type="item.type"
        @userInfo="onUserInfo"
        @contextmenu.prevent.native="
          showMenu($event, item);
          return false;
        "
      />
      <msg-item-else
        v-if="item.source == 'else'"
        :showDate="getShowAgoDate(i)"
        :key="i"
        :value="item.value"
        :icon="item.icon"
        :name="item.name"
        :date="item.date"
        :id="item.id"
        :type="item.type"
        @userInfo="onUserInfo"
        @contextmenu.prevent.native="
          showMenu($event, item);
          return false;
        "
      />
    </template>
  </div>
</template>

<script>
import MsgItemMe from "@comp/chat/msgItem/MsgItemMe.vue";
import MsgItemElse from "@comp/chat/msgItem/MsgItemElse.vue";
export default {
  model: {
    methods: ["userInfo", "history", "share", "task", "delete"],
  },
  components: { MsgItemMe, MsgItemElse },
  props: {
    list: { type: Array, required: true },
    height: { type: Number },
    showHistory:{type:Boolean,default:true},
  },
  data() {
    return {
      lookHistory:false,
      oldItem:{}
    };
  },
  methods: {
    getShowAgoDate(i) {
      if (i > 0) {
        const item = this.list[i - 1];
        if (item.hasOwnProperty("date")) {
          const now = this.list[i].date || new Date();
          if (this.$moment(now).diff(item.date, "m") < 10) {
            return false;
          } else {
            return true;
          }
        }
      } else {
        return true;
      }
    },
    onUserInfo(id,  type) {
      this.$emit("userInfo", id, type);
    },
    history() {
      this.lookHistory = true
      this.$emit("history", this.list);
    },
    showMenu(e, row) {
      const self = this;
      this.$contextmenu({
        items: [
          {
            label: "转发",
            icon: "el-icon-share",
            onClick: () => {
              self.$emit("share", row);
            },
          },
          {
            label: "变更为任务",
            icon: "iconfont icon-task",
            divided: true,
            onClick: () => {
              self.$emit("task", row);
            },
          },
          {
            label: "撤销并删除",
            icon: "el-icon-delete",
            onClick: () => {
              self.$emit("delete", row);
            },
          },
        ],
        event: e,
        zIndex: 99999,
      });
    },
  },
  watch: {
    "list.length"(val) {
      if (this.oldItem!=this.list[val-1]){
        this.lookHistory=false
      }
      this.$nextTick(() => {
        if (!this.lookHistory){
          this.$refs.chatMain.scrollTop = this.$refs.chatMain.scrollHeight;
        }
      });
      this.oldItem = this.list[val-1]
    },
  },
};
</script>

<style lang="less" scoped>
.chat-main {
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.history {
  text-align: center;
  margin-bottom: 10px;
  margin-top: -10px;
  span {
    font-size: 12px;
    cursor: pointer;
    background-color: rgb(160, 207, 255);
    border-radius: 3px;
    color: #fff;
    padding: 0px 10px;
  }
}
</style>
